@extends('layouts.system_common')
@section('content')
    <script type="text/javascript">
        var element = document.getElementById("system_tab_1");
        element.classList.add("tab_selected");
    </script>
    <div class="breadcrumbs_container">
        {{ Breadcrumbs::render('customer.cart_buy') }}
    </div>


    <div class="row">
        <div class="col-lg-6 input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">店舗を選ぶ</label>
            </div>
            <select class="custom-select" id="lyx_select_shop">
                @foreach($shop_list as $sp)
                    <option value="{{$sp->shop_id}}">{{$sp->shop_name}}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="lyx_table">
        <table class="table table-striped">
            <thead style="background-color: #007BFF;color: white">
            <tr>
                <th scope="col">@lang('symessages.info.product_name')</th>
                <th scope="col">@lang('symessages.info.size')</th>
                <th scope="col">数量</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody id="lyx_tbody">
            @foreach($list as $value)
                <tr data-info="{{json_encode(object_to_array($value),JSON_UNESCAPED_UNICODE)}}">
                    <td>{{$value->goods_name}}</td>
                    <td>{{$value->color.'/'.$value->size}}</td>
                    <td><input type="number" class="form-control lyx_now_num" style="width:80px;" value="{{$value->goods_num}}">
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm lyx_del" data-id="{{$value->cart_id}}">
                            Delete
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>

    </div>
    <?php echo csrf_field(); ?>
    <div id="stock_button_container">
        <button id="lyx_create_order" type="button" class="pure-button pure-button-primary button_normal">
            注文を確定する
        </button>
    </div>

    <script>

        $(function () {

            var order_id = "{{$order_id}}";
            var shop_id = "{{$shop_list[0]->shop_id}}";


            $('#lyx_select_shop').change(function () {
                shop_id = $(this).val();
            })

            $('#lyx_create_order').on('click',function () {
                postData();
            })

            $(".lyx_del").on('click', function () {
                var that = $(this).parents('tr');
                var cart_id = $(this).data('id');
                del(cart_id, that);
            })

            function del(cart_id, that) {

                hdAjax({
                    url: "{{url('customer/del_cart_goods')}}",
                    data: {cart_id: cart_id},
                    success: function (retData) {
                        if (retData.code == 1001) {
                            $(that).remove();
                        }
                    }

                })

            }

            function postData() {
                var postData = [];
                $('#lyx_tbody tr').each(function () {
                    var info = $(this).data('info');
                    var num = $(this).find('.lyx_now_num').val();
                    info.goods_num = num;
                    postData.push(info);
                })
                createOrder(postData);
            }

            function createOrder(data) {

                var token = $('input[name="_token"]').val();

                hdAjax({
                    url:"{{url('customer/save_order')}}",
                    data:{
                        order_id:order_id,
                        shop_id:shop_id,
                        goods_list:data,
                        cart_buy:'delete',
                        _token:token
                    },
                    type:'post',
                    success:function (retData) {
                        if(retData.code == 1001){
                            successAlert('一次成功に成功する','home');
                        }else{
                            layuiTopMsg(retData.msg);
                        }
                    }
                })
            }

        })


    </script>
@endsection
